<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			div{
				width: 100px;
				height: 50px;
				background: #f00;

				/*1. 告诉系统要执行哪一个动画(例如:sport) */
				animation-name: sport;

				/* 3.告诉系统动画的持续时间  */
				animation-duration: 2s;
			}

			/*2. 创建一个名字叫sport的动画  */
			@keyframes sport {
				from {
					margin-left: 0px;
				}

				to {
					margin-left: 500px;
				}
		</style>
	</head>
	<body>
		<!-- 
		动画模块
		 1.过渡和动画之间的异同
		 1.1不同点
		 过渡必须人为的触发才会执行动画
		 动画不需要人为的触发就可以执行动画
		 
		 1.2相同点
		 过渡和动画都是用来给元素添加动画的
		 过渡和动画都是系统新增的一些属性
		 过渡和动画都需要满足三要素才会有动画效果
		 
		动画3要素
		1. 告诉系统要执行哪一个动画(例如:sport)
		2. 创建一个名字叫sport的动画
		3. 告诉系统动画的持续时间
		 -->
		<div></div>
	</body>
</html>
